﻿@model CustomerOrderListModel
@using Nop.Core.Infrastructure;
@using SpotsHub.Gateway.Models.Customer;
@using Telerik.Web.Mvc;
@using Telerik.Web.Mvc.UI;
@{
    Layout = "~/Views/Shared/_MyHUB.cshtml";

    //title
    ViewBag.Title = T("Account.MyAccount") + "-" + T("Account.CustomerOrders");

    var gridPageSize = EngineContext.Current.Resolve<Nop.Core.Domain.Customers.CustomerSettings>().GridPageSize;
    if (gridPageSize <= 0)
    {
        gridPageSize = 10;
    }
}

@section left
{
    @Html.Partial("MyAccountNavigation", Model.NavigationModel, new ViewDataDictionary())
}

<div class="page-shopping">

    <h1 class="section-title">@*@T("Account.CustomerOrders")*@Shopping History</h1>
    <div class="slide-wrapper">
        <div class="slide order-list-slide">
            <div class="section-wrapper">

                @if (Model.RecurringOrders.Count > 0)
                {
                    using (Html.BeginForm())
                    {
                        <div class="recurring-payments">
                            <div class="section-title">
                                @T("Account.CustomerOrders.RecurringOrders")
                            </div>
                            <div class="recurring-payments-box">
                                <table class="data-table">

                                    <thead>
                                        <tr>
                                            <th class="a-center">
                                                @T("Account.CustomerOrders.RecurringOrders.StartDate")
                                            </th>
                                            <th class="a-center">
                                                @T("Account.CustomerOrders.RecurringOrders.CycleInfo")
                                            </th>
                                            <th class="a-center">
                                                @T("Account.CustomerOrders.RecurringOrders.NextPayment")
                                            </th>
                                            <th class="a-center">
                                                @T("Account.CustomerOrders.RecurringOrders.TotalCycles")
                                            </th>
                                            <th class="a-center">
                                                @T("Account.CustomerOrders.RecurringOrders.CyclesRemaining")
                                            </th>
                                            <th class="a-center">
                                                @T("Account.CustomerOrders.RecurringOrders.InitialOrder")
                                            </th>
                                            <th class="a-center">
                                                @T("Account.CustomerOrders.RecurringOrders.Cancel")
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach (var item in Model.RecurringOrders)
                                        {
                                            <tr>
                                                <td class="a-center">
                                                    @item.StartDate
                                                </td>
                                                <td class="a-center">
                                                    @item.CycleInfo
                                                </td>
                                                <td class="a-center">
                                                    @item.NextPayment
                                                </td>
                                                <td class="a-center">
                                                    @item.TotalCycles
                                                </td>
                                                <td class="a-center">
                                                    @item.CyclesRemaining
                                                </td>
                                                <td class="a-center">
                                                    <a class="link" href="@Url.RouteUrl("OrderDetails", new { orderId = item.InitialOrderId })">@string.Format(T("Account.CustomerOrders.RecurringOrders.ViewInitialOrder").Text, item.InitialOrderId)</a>
                                                </td>
                                                <td class="a-center">
                                                    @if (item.CanCancel)
                                                    {
                                                        <input type="submit" name="cancelRecurringPayment@(item.Id)" value="@T("Account.CustomerOrders.RecurringOrders.Cancel")" class="button-2 cancel-recurring-order-button" />
                                                    }
                                                </td>
                                            </tr>
                                        }
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    }
                    <div class="content-clear">
                    </div>
                    if (Model.CancelRecurringPaymentErrors.Count > 0)
                    {
                        <div class="message-error">
                            <ul>
                                @for (int i = 0; i < Model.CancelRecurringPaymentErrors.Count; i++)
                                {
                                    <li>@Model.CancelRecurringPaymentErrors[i]</li>
                                }
                            </ul>
                        </div>
                        <div class="content-clear">
                        </div>
                    }
                }
                <div class="order-list">
                    <div class="invoices-search">
                        <table>
                            <tr>
                                <td class="invoice-searchbox">
                                    @Html.Label("Order #:")
                                    @Html.TextBoxFor(model => model.OrderId, new { placeholder = "Please type in order #", autocomplete = "off", @class = "form-control" })
                                </td>
                                <td class="invoice-daylist">
                                    @Html.Label("Status:")
                                    @Html.DropDownListFor(model => model.OrderStatus, Model.OrderStatusOptions, new { @class = "form-control" })
                                </td>
                                <td class="invoice-daylist">
                                    @Html.Label("For:")
                                    @Html.DropDownListFor(model => model.OrderDayOption, Model.OrderDaysOptions, new { @class = "form-control" })
                                </td>
                                <td>
                                    <div class="order-search-loading">
                                        <img class="loading-gif" src="/content/images/loading.gif" />
                                        <img class="loading-svg" src="/content/images/loading.svg" />
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div>
                        @(Html.Telerik().Grid<CustomerOrderListModel.OrderDetailsModel>()
                            .Name("ordersDetail-grid")
                                    .DataKeys(keys =>
                            {
                                keys.Add(x => x.Id).RouteKey("orderId");
                            })
                            .DataBinding(binding =>
                            {
                                binding.Ajax().Select("OrderList", "Customer");
                            })
                            .Columns(columns =>
                            {
                                columns.Bound(x => x.Id)
                                    .ClientTemplate("<label>Order#:</label> <#= Id #>")
                                    .Title(T("Account.CustomerOrders.OrderNumber").Text)
                                    .HtmlAttributes(new { Class = "table-number" })
                                    .HeaderHtmlAttributes(new { Class = "table-number t-header" });
                                columns.Bound(x => x.OrderStatus)
                                    .ClientTemplate("<label>Order Status:</label> <#= OrderStatus #>")
                                    .Title(T("Account.CustomerOrders.OrderStatus").Text)
                                    .HtmlAttributes(new { Class = "table-status" })
                                    .HeaderHtmlAttributes(new { Class = "table-status t-header" });
                                columns.Bound(x => x.CreatedOn)
                                    .ClientTemplate("<label>Created On:</label> <#= CreatedOnStr #>")
                                    .Title(T("Account.CustomerOrders.OrderDate").Text)
                                    .HtmlAttributes(new { Class = "table-date" })
                                    .HeaderHtmlAttributes(new { Class = "table-date t-header" });
                                columns.Bound(x => x.OrderTotal)
                                    .ClientTemplate("<label>Order Total:</label> <#= OrderTotal #>")
                                    .Title(T("Account.CustomerOrders.OrderTotal").Text)
                                    .HtmlAttributes(new { Class = "table-total" })
                                    .HeaderHtmlAttributes(new { Class = "table-total t-header" });

                                columns.Bound(x => x.PaymentStatus)
                                   .ClientTemplate("<label>Pay Status:</label> <#= PaymentStatus #>")
                                   .Title(T("Account.CustomerOrders.PaymentStatus").Text)
                                   .HeaderHtmlAttributes(new { Class = "table-detail t-header" });

                                columns.Bound(x => x.DetailsStr)
                                    .ClientTemplate("<#= DetailsStr #>")
                                    .Title(T("Account.CustomerOrders.OrderDetails").Text)
                                    .HtmlAttributes(new { Class = "table-detail" })
                                    .HeaderHtmlAttributes(new { Class = "table-detail t-header" });
                            })
                            .Pageable(settings => settings.PageSize(gridPageSize).Position(GridPagerPosition.Bottom))
                            .HtmlAttributes(new { Class = "window-title t-widget t-grid" })
                            .NoRecordsTemplate(T("Account.CustomerOrders.NoOrders").Text)
                            .ClientEvents(events =>
                            {
                                events.OnDataBinding("onDataBinding");
                                events.OnComplete("onComplete");
                            })
                            .EnableCustomBinding(true))
                    </div>
                </div>
            </div>
        </div>
        <div class="slide order-details-slide"></div>
        <div class="clear"></div>
        <div class="order-loading">
            <img class="loading-gif" src="/content/images/loading.gif" />
            <img class="loading-svg" src="/content/images/loading.svg" />
        </div>
    </div>
</div>
<script>
    @if(Model.OrderId.HasValue)
    {
<text>
    $(document).ready(function () {
        var viewOrderId = parseInt('@Model.OrderId.Value');
        if (!isNaN(viewOrderId) && viewOrderId > 0) {
            requestOrder(viewOrderId, false);
        }
    });
    </text>
    }
    var searchKeyupTimeout;
    $(document).live("change", "#@(Html.FieldIdFor(model => model.OrderDayOption))", function () {
        OrderSearch();
    }).live("keyup", "input#@(Html.FieldIdFor(model => model.OrderId))", function () {
        clearTimeout(searchKeyupTimeout);
        searchKeyupTimeout = setTimeout(function () {
            OrderSearch();
        }, 1500);
    });
    function OrderSearch() {
        var grid = $("#ordersDetail-grid").data("tGrid");
        grid.currentPage = 1;
        grid.ajaxRequest();
    }

    $(".order-details-button").live("click", function () {
        var orderId = parseInt($(this).attr("data-id"));
        if (!isNaN(orderId) && orderId > 0) {
            requestOrder(orderId, true);
        }
    });
    $(".order-back-button").live("click", function () {
        $('.modal').modal('hide');
        $(".order-back-button").remove();
        $(".order-list-slide").stop().animate({ left: 0 });
        $(".order-details-slide").css("position", "absolute").stop().animate({ left: "100%" }, function () {
            $(".order-list-slide").css("position", "relative;");
            $('.order-details-slide').empty();
            var grid = $("#ordersDetail-grid").data("tGrid");
            grid.currentPage = 1;
            grid.ajaxRequest();
        });
    });
    $(".order-cancel-back-button").live("click", function () {
        $(".modal").modal("hide");
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
        requestOrder($(this).attr("data-id"), false);
    });
    function requestOrder(orderId, animate) {
        $(".order-back-button").remove();
        $('.order-details-slide').empty();
        $(".page-shopping h1").append("<input type='button' class='btn btn-normal order-back-button' value='Back' >");
        if (animate == true) {
            $(".order-list-slide").css("position", "absolute").stop().animate({ left: "-100%" });
            $(".order-details-slide").stop().animate({ left: 0 }, function () {
                $(".order-details-slide").css("position", "relative");
            });
        } else {
            $(".order-list-slide").css({ position: "absolute", left: "-100%" });
            $(".order-details-slide").css({ position: "relative", left: 0 });
        }
        $(".order-loading").fadeIn(200);
        $.ajax({
            url: '@Url.Action("OrderDetails", "Order", new { area = "Commerce" })',
            data: { OrderId: orderId },
            type: "POST",
            dataType: "JSON"
        }).done(function (data) {
            if (data.html) {
                $('.order-details-slide').html(data.html);
            }
        }).always(function () {
            $(".order-loading").fadeOut(200);
        });
    }
    function onDataBinding(e) {
        var orderModel = {
            OrderId: $("input#@(Html.FieldIdFor(model => model.OrderId))").val(),
            OrderStatus: $("#@(Html.FieldIdFor(model => model.OrderStatus))").val(),
            OrderDayOption: $("#@(Html.FieldIdFor(model => model.OrderDayOption))").val(),
        };
        e.data = orderModel;
        $(".order-search-loading").stop().fadeIn(200);
    }
    function onComplete() {
        $(".order-search-loading").stop().fadeOut(200);
    }
</script>